<template>
  <div id="app">
    <MyComponent>
      <!-- 默认插槽 -->
      <p>这是默认插槽的内容。</p>

      <!-- 命名插槽 -->
      <template v-slot:header>
        <h1>这是自定义的头部内容</h1>
      </template>
      <template v-slot:content>
        <p>这是自定义的内容部分。</p>
      </template>
      <template v-slot:footer>
        <p>这是自定义的底部内容。</p>
      </template>

      <!-- 作用域插槽 -->
      <template v-slot:scoped="slotProps">
        <p>作用域插槽内容: {{ slotProps.user.name }} (年龄: {{ slotProps.user.age }})</p>
      </template>
    </MyComponent>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>